<!-- 章节编辑 -->
<template>
  <div class="form-page">
    <base-title title="课程信息"></base-title>
    <div class="base-info">
      <div>
        <el-image
          style="width: 280px; height: 120px; border-radius: 10px"
          :src="activeData.courseLogo"
        ></el-image>
      </div>
      <div>
        <div class="info-group">
          <div class="title">{{ activeData.courseName }}</div>
          <div class="info">描述：{{ activeData.introduce }}</div>
        </div>
      </div>
    </div>
    <base-title title="章节信息"></base-title>
    <div class="chapter-info">
      <div class="left">
        <div class="header">
          <div class="title">章节目录</div>
          <div class="icon">
            <i class="el-icon-circle-plus-outline" @click="addChapter"></i>
          </div>
        </div>
        <div>
          <div
            v-for="(item, index) in charpterList"
            :key="item.id"
            class="item"
            :class="{ 'acitve-item': activeCharpter.id === item.id }"
            @click="clickCharpter(item)"
          >
            <div>{{ `第${index + 1}章 ${item.chapterName}` }}</div>
            <div class="item-icon">
              <i class="el-icon-edit" @click="editChapter"></i>
              <i
                v-if="charpterList.length > 1"
                style="margin-left: 10px"
                class="el-icon-delete"
                @click="DeleteChapter(item)"
              ></i>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="header">
          <div>资源列表</div>
          <div>
            <el-button size="mini" @click="addResource">添加资源</el-button>
          </div>
        </div>
        <div class="list">
          <div class="list-item" v-for="item in resourceList" :key="item.id">
            <div>{{ item.periodName }}</div>
            <div>
              <i class="el-icon-edit" @click="editMaterial(item)"></i>
              <i
                style="margin-left: 10px"
                class="el-icon-delete"
                @click="deleteMaterial(item)"
              ></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 修改章节弹窗 -->
    <el-dialog
      :visible="addChapterVisible"
      :title="isEdit ? '修改章节' : '添加章节'"
      width="400px"
    >
      <el-input v-model="charpterName" placeholder="请输入章节名称"></el-input>
      <div slot="footer">
        <el-button @click="charpterClose">取消</el-button>
        <el-button type="primary" @click="charpterConfirm">确认</el-button>
      </div>
    </el-dialog>
    <!-- 修改资源弹窗 -->
    <el-dialog
      :visible="addMaterialVisible"
      :title="'修改资源名称'"
      width="400px"
    >
      <el-input v-model="materialName" placeholder="请输入资源名称"></el-input>
      <div slot="footer">
        <el-button @click="materialClose">取消</el-button>
        <el-button type="primary" @click="marterialConfirm">确认</el-button>
      </div>
    </el-dialog>
    <recourse-selector
      v-if="recourseVisible"
      @close="recourseVisible = false"
      @confirm="saveChapterMaterial"
    ></recourse-selector>
    <form-btn :showSave="false" @cancel="$emit('cancel')" />
  </div>
</template>

<script>
import {
  QueryChapterByCourse,
  EditChapter,
  AddChapter,
  DeleteChapter,
  SaveChapterMaterial,
  QueryChapterMaterialByCourseId,
  DeleteChapterMaterial,
  EditChapterMaterial,
} from "@/api/course/chapter.js";
export default {
  name: "Chapter",
  props: {
    activeData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      isEdit: false,
      addChapterVisible: false,
      addMaterialVisible: false,
      recourseVisible: false,
      activeCharpter: {},
      activeMaterial: {},
      charpterName: "",
      materialName: "",
      charpterList: [],
      resourceList: [],
    };
  },
  methods: {
    clickCharpter(item) {
      this.activeCharpter = item;
      this.queryMarterial();
    },
    saveChapterMaterial(data) {
      const params = {
        chapterId: this.activeCharpter.id,
        courseId: this.activeData.id,
        periodName: data.resourceName,
        resourceId: data.id,
      };
      SaveChapterMaterial(params).then((res) => {
        if (res.code === 200) {
          this.$message.success("保存成功");
          this.recourseVisible = false;
          this.queryMarterial();
        }
      });
    },
    charpterClose() {
      this.charpterName = "";
      this.addChapterVisible = false;
    },
    charpterConfirm() {
      if (!this.charpterName) {
        this.$message.warning("请输入章节名称");
        return;
      }
      const params = this.isEdit
        ? { ...this.activeCharpter, chapterName: this.charpterName }
        : {
            chapterName: this.charpterName,
            courseId: this.activeData.id,
            sort: 1,
          };
      const api = this.isEdit ? EditChapter : AddChapter;
      api(params).then((res) => {
        if (res.code === 200) {
          this.$message.success(this.isEdit ? "修改成功" : "新增成功");
          this.charpterClose();
          this.queryChapter();
        }
      });
    },
    addChapter() {
      this.isEdit = false;
      this.charpterName = "";
      this.addChapterVisible = true;
    },
    DeleteChapter(row) {
      this.$confirm("是否删除该章节", "提示", {
        type: "warning",
      })
        .then(() => {
          DeleteChapter(row.id).then((res) => {
            if (res.code === 200) {
              this.$message.success("删除成功");
              this.queryChapter();
            }
          });
        })
        .catch(() => {});
    },
    addChapter() {
      this.isEdit = false;
      this.charpterName = "";
      this.addChapterVisible = true;
    },
    editChapter() {
      this.isEdit = true;
      this.charpterName = this.activeCharpter.chapterName;
      this.addChapterVisible = true;
    },
    addResource() {
      this.recourseVisible = true;
    },
    queryMarterial() {
      QueryChapterMaterialByCourseId({
        chapterId: this.activeCharpter.id,
      }).then((res) => {
        if (res.code === 200) {
          this.resourceList = res.data || [];
        }
      });
    },
    queryChapter() {
      QueryChapterByCourse({ courseId: this.activeData.id }).then((res) => {
        if (res.code === 200) {
          this.charpterList = res.data || [];
          this.activeCharpter = this.charpterList[0] || {};
          this.queryMarterial();
        }
      });
    },
    editMaterial(row) {
      this.addMaterialVisible = true;
      this.materialName = row.periodName;
      this.activeMaterial = row;
    },
    materialClose() {
      this.materialName = "";
      this.addMaterialVisible = false;
    },
    marterialConfirm() {
      if (!this.materialName) {
        this.$message.warning("请输入资源名称");
        return;
      }
      EditChapterMaterial({
        id: this.activeMaterial.id,
        periodName: this.materialName,
      }).then((res) => {
        if (res.code === 200) {
          this.$message.success("修改资源成功");
          this.materialClose();
          this.queryMarterial();
        }
      });
    },
    deleteMaterial(row) {
      this.$modal
        .confirm("是否确认删除该章节资源？")
        .then(function () {
          return DeleteChapterMaterial(row.id);
        })
        .then(() => {
          this.queryMarterial();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
  },
  mounted() {
    this.queryChapter();
  },
};
</script>

<style lang="scss" scoped>
@import url("../../../assets/styles/form-page.scss");
.base-info {
  display: flex;
  margin-bottom: 20px;
  .info-group {
    margin-left: 20px;
    .title {
      font-size: 18px;
      margin-bottom: 10px;
      color: #303133;
    }
    .info {
      margin-bottom: 3px;
      color: #909399;
    }
  }
}
.chapter-info {
  display: flex;
  border: 1px solid #ebeef5;
  height: 545px;
  .left {
    width: 400px;
    border-right: 1px solid #ebeef5;
    .header {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px;
      border-bottom: 1px solid #ebeef5;
      .icon {
        font-size: 20px;
        cursor: pointer;
        &:hover {
          color: #409eff;
        }
      }
    }
    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px;
      border-bottom: 1px solid #ebeef5;
    }
    .item-icon {
      i {
        cursor: pointer;
        &:hover {
          color: #409eff;
        }
      }
    }
    .acitve-item {
      color: #409eff;
      background-color: #ecf5ff;
    }
  }
  .right {
    flex: 1;
    .header {
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding: 13px;
      border-bottom: 1px solid #ebeef5;
      background-color: #f2f6fc;
    }
    .list {
      overflow: auto;
      .list-item {
        display: flex;
        padding: 0 16px;
        color: #606266;
        justify-content: space-between;
        line-height: 40px;
        border-bottom: 1px solid #ebeef5;
        i {
          cursor: pointer;
          &:hover {
            color: #409eff;
          }
        }
      }
    }
  }
}
</style>